<template>
  <a-modal
    :title="$t('view') + $t('versionDepend')"
    :visible="visible"
    @cancel="
      () => {
        visible = !visible
      }
    "
    :destroyOnClose="true"
    :keyboard="false"
    :maskClosable="false"
    :width="900"
  >
    <template slot="footer">
      <a-button
        type="primary"
        @click.stop="
          () => {
            visible = false
          }
        "
      >{{ $t('back') }}</a-button
      >
    </template>
    <div style="height: 600px">
      <s-table :columns="columns" :rowKey="(record, index) => index" :data="loadData" class="h100">
        <template
          slot-scope="text"
          v-for="column in columns.filter((item) => !item.special)"
          :slot="column.scopedSlots.customRender"
        >
          <table-ellipsis :text="text || '_'" :key="column.dataIndex"></table-ellipsis>
        </template>
      </s-table>
    </div>
  </a-modal>
</template>
<script>
import tableEllipsis from '@/components/Ellipsis/TableEllipsis'
import { STable } from '@/components'
import i18n from '@/lang'
const columns = [
  {
    title: i18n.t('partNumber'),
    dataIndex: 'ecuModuleId',
    width: 200,
    scopedSlots: { customRender: 'partNumber' }
  },
  {
    title: i18n.t('partName'),
    dataIndex: 'ecuName',
    width: 200,
    scopedSlots: { customRender: 'partName' }
  },
  {
    title: i18n.t('软件编码'),
    dataIndex: 'softwareCode',
    width: 200,
    scopedSlots: { customRender: 'softwareCode' }
  },
  {
    title: i18n.t('诊断ID'),
    dataIndex: 'ecuDiaId',
    width: 200,
    scopedSlots: { customRender: 'ecuDiaId' }
  },
  {
    title: i18n.t('最低运行版本'),
    dataIndex: 'dependSoftwareVersion',
    width: 300,
    special: true,
    scopedSlots: { customRender: 'minDependencyVersion' }
  }
]
export default {
  name: 'ServiceVersionDepend',
  components: { tableEllipsis, STable },
  props: {
    serviceId: {
      type: String,
      default: ''
    },
    modelId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      columns,
      visible: false,
      tbData: []
    }
  },
  methods: {
    loadData (parameter) {
      const vm = this
      return vm.$api.getVersionDependByService({ ...parameter, serviceId: vm.serviceId, modelId: vm.modelId })
    }
  }
}
</script>
